<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
		<title>Tyy English Word</title>
		<!-- Bootstrap core CSS -->
		<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
		<!-- Bootstrap theme -->
		<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="css/theme.css" rel="stylesheet">

		<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

		<script type="text/javascript" src="js/index.js"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>
	<body role="document">
		<!-- Fixed navbar -->
<jsp:include page="nav.jsp" flush="true">
	<jsp:param name="cur" value="home" />
</jsp:include>
		<!-- Header -->
		<div class="container theme-showcase" role="main">
			<div class="page-header">
				<h1>Books</h1>
			</div>
			<div class="row" id="books">
<s:iterator value="books" status="st">
				<div class="col-sm-6 col-md-4 col-lg-3 book" attr="${id }">
					<div class="thumbnail">
						<a href="#collapseBook${st.count }" data-toggle="collapse" aria-controls="collapseBook${st.count }" aria-expanded="false" title="${name }">
							<img src="${imgPath }" alt="${name }">
						</a>
						<div class="caption">
							<h3>
								<a href="#collapseBook${st.count }" data-toggle="collapse" aria-controls="collapseBook${st.count }" aria-expanded="false" title="${name }">
									${name }<br /><small>${info }</small>
								</a>
							</h3>
						</div>
					</div>
				</div>
</s:iterator>
			</div>
			<div id="units" class="row">
<s:iterator value="books" status="st" id="b">
				<div class="collapse col-md-12" id="collapseBook${st.count }">
					<div class="well">
						<div class="btn-group" role="group" aria-label="Units">
<s:bean name="org.apache.struts2.util.Counter" id="counter">
	<s:param name="first" value="1" />
	<s:param name="last" value="unitCount" />
	<s:iterator status="bst">
							<button type="button" class="btn btn-default" attr='<s:property/>'>Unit <s:property/></button>
	</s:iterator>
</s:bean>
						</div>
					</div>
				</div>
</s:iterator>
			</div>
		</div>

		</div><!-- /container -->
<!-- Footer -->
<%@ include file="footer.jsp"%>